<script lang="ts">
import { defineComponent, reactive, ref } from "vue";

interface FormModule {
  area: string | undefined;
  unit: string | undefined;
  regard: string | undefined;
}



export default defineComponent({
  name: "ApplyServe",
  setup(props, { emit, expose }) {
    const isShow = ref(false);

    const formInline = reactive<FormModule>({
      area: undefined,
      regard: undefined,
      unit: undefined,
    });

    const open = (id:string) => {
      console.log('id',id);
      isShow.value = true;
    };
    const close = () => {
      isShow.value = false;
    };

    expose({
      open,
    });

    const options = ref([
      {
        value: "1",
        label: "库尔勒市",
      },
      {
        value: "2",
        label: "和静县",
      },
      {
        value: "3",
        label: "焉耆县",
      },
      {
        value: "4",
        label: "轮台县",
      },
      {
        value: "5",
        label: "尉犁县",
      },
      {
        value: "6",
        label: "和硕县",
      },
      {
        value: "7",
        label: "博湖县",
      },
      {
        value: "8",
        label: "且末县",
      },
      {
        value: "9",
        label: "若羌县",
      },
    ]);

    return {
      isShow,
      close,
      formInline,
      options
    };
  },
});
</script>

<template>
  <div class="apply-wrap">
    <el-dialog v-model="isShow" title="服务申请" width="40%" @close="close">
      <div class="tc-body">
        <el-form :model="formInline" size="mini">
          <el-form-item label="申请单位:">
            <el-input
              v-model="formInline.unit"
              placeholder="申请单位"
            ></el-input>
          </el-form-item>
          <el-form-item label="申请区域:">
            <el-select
              v-model="formInline.area"
              style="width: 100%"
              placeholder="请选择行政区"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="申请理由:">
            <el-input
              v-model="formInline.regard"
              type="textarea"
              placeholder="请填写申请理由"
              :rows="3"
            ></el-input>
          </el-form-item>
          <div style="text-align: right">
            <el-button round @click="close">取消</el-button>
            <el-button type="primary" round @click="close">确定</el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="less">
.apply-wrap {
  .el-textarea__inner {
    border: 1px rgb(102, 160, 232) solid;
    font-family: arial;
  }
  .el-dialog {
    box-shadow: inset 0px 1px 6px 0px #74f2f7;
    border-radius: 5px;
    .el-dialog__header {
      border-top-left-radius: 4px;
    }
  }
}
</style>